<template>
  <div>
    <ul>
      <li v-for="value in list" :key="value.origPicUrl" @click="info(value)">
        <img :src="value.origPicUrl">
        <div class="boxh">
          <h4 v-html="value.description"></h4>
        </div>
        <div class="box">
          <div class="alt">
            <span class="price">￥{{value.realPrice}}</span>
            <span class="remove">￥{{value.price}}</span>
            <p>
              <span>热卖中</span>
              <span>剩{{value.saleCount}}件</span>
            </p>
          </div>
        </div>
      </li>
    </ul>

    <cube-button @click="more">加载更多</cube-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: null,
      page: 1
    }
  },
  methods: {
    // 获取列表
    getGoods (callback = () => {}) {
      this.axios.get('/goods')
        .then(res => {
          this.list = res.data
          this.title(this.list)
          callback()
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            let toast = this.$createToast({
              txt: '请求超时',
              type: 'txt'
            })
            toast.show()
          } else {
            console.log(err)
          }
          callback()
        })
    },
    // 更新列表
    more () {
      this.axios.get('/goods', { params: { page: ++this.page } })
        .then(res => {
          console.log('1')
          this.title(res.data)
          this.list = this.list.concat(res.data)
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            let toast = this.$createToast({
              txt: '请求超时',
              type: 'txt'
            })
            toast.show()
          } else {
            console.log(err)
          }
        })
    },
    // 替换实体字符
    title (arr) {
      arr.forEach(value => {
        value.description = value.description.replace(/&lt;/g, '<')
        value.description = value.description.replace(/&gt;/g, '>')
      })
    },
    // 编程式路由
    info (value) {
      this.$router.push({
        path: '/index/goods/' + value.itemId,
        query: {
          url: value.clickUrl,
          title: value.description,
          id: value.itemId
        }
      })
    }
  },
  created () {
    this.getGoods(this.load().hide)
  }
}
</script>

<style lang="stylus" scoped>
ul
  width 96%
  display flex
  justify-content space-between
  flex-wrap wrap
  margin 10px auto 0
  li
    width 49%
    box-shadow 0px 0px 1px 2px #d0d0d0;
    margin-bottom 10px
    position relative
    height 305px
    .boxh
      padding 5px
      h4
        height 48px
        width 100%
        overflow hidden
        font-size 15px
        line-height 23px
        font-weight 700
    img
      width 100%
    >>> .H
      color red
    .box
      padding 2px
      position absolute
      bottom 0
      width 100%
      margin-top 5px
      .alt
        background-color #ddd
        padding 5px
        .price
          color #d70000
          font-size 18px
          margin-right 10px
        .remove
          color #8f8f94
          font-size 13px
          text-decoration line-through
        p
          display flex
          justify-content space-between
          font-size 13px
          margin-top 5px
</style>
